<template>
	<view class="list">
		<view class="list-left">
			<view v-for="(v,k) in list" :class="{active:listIndex == k}" @click="changeIndex(k)">{{v.name}}</view>
		</view>
		<view class="list-right">
			<view v-for="(v,k) in children" :class="{active:list[listIndex].childrenIndex == k}"
				@click="changeChildrenIndex(k,v)">{{v.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '附近',
					childrenIndex: 0,
					children: [{
						name: '附近智能推荐',
						id: 0,
					}, {
						name: '500m',
						id: 1,
					}, {
						name: '1km',
						id: 2,
					}, {
						name: '2km',
						id: 3,
					}, {
						name: '5km',
						id: 4,
					}]
				}, 
				// {
				// 	name: '行政区/商区',
				// 	childrenIndex: 0,
				// 	children: []
				// }, {
				// 	name: '地铁',
				// 	childrenIndex: 0,
				// 	children: []
				// },
				],

				listIndex: 0,
			}
		},
		computed: {
			children() {
				return this.list[this.listIndex].children
			}
		},
		methods: {
			changeIndex(index) {
				this.listIndex = index
			},
			changeChildrenIndex(index, item) {
				this.list[this.listIndex].childrenIndex = index
				this.$emit('change', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		// flex-direction: column;
		height: 100%;

		>view {
			>view {
				height: 80rpx;
				line-height: 80rpx;
				padding-left: 20rpx;
				font-weight: 400;
				font-size: 26rpx;
				position: relative;

			}

			>view.active {
				color: #EB5C20 !important;
				background-color: #fff;
			}

		}

		&-left {
			flex: 2;
			background-color: #F6F6F6;
			height: 100%;

			>view.active::before {
				content: '';
				width: 4rpx;
				height: 30rpx;
				background: linear-gradient(90deg, #DD551B, #F49355);
				position: absolute;
				color: #EB5C20;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}

		}

		&-right {
			flex: 7;
			height: 100%;
		}
	}
</style>